<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" type="text/css" />
        <script src="./lib/vue.js"></script>
        <title>15 vue-transition动画</title>
        <style>
            .div1 {
                width: 100%;
                height: 200px;
                background-color: darkorchid;
                border: 2px solid;
                margin-top: 10px;
            }
            .div2 {
                width: 100%;
                height: 200px;
                background-color: darkseagreen;
                border: 2px solid;
                margin-top: 10px;
            }

            .div3 {
                width: 100%;
                height: 200px;
                background-color: darkturquoise;
                border: 2px solid;
                margin-top: 10px;
            }

            .kerwinfade-enter-active,
            .kerwinfade-leave-active {
                transition: all 0.8s;
            }
            .kerwinfade-enter,
            .kerwinfade-leave-to {
                opacity: 0;
                transform: translateX(100px);
            }

            .kerwinbounce-enter-active {
                animation: bounce-in 0.8s;
            }
            .kerwinbounce-leave-active {
                animation: bounce-in 0.8s reverse;
            }
            @keyframes bounce-in {
                0% {
                    opacity: 0;
                    transform: translateX(100px);
                }

                100% {
                    opacity: 1;
                    transform: translateX(0px);
                }
            }
        </style>
    </head>
    <body>
        <div id="box">
            <!-- <button @click="isShow = !isShow; isShowAppear = !isShowAppear;">click</button>

            <transition name="kerwinfade">
                <div class="div1" v-show="isShow">11111111111</div>
            </transition>

            <transition name="kerwinbounce">
                <div class="div2" v-show="isShow">22222222222</div>
            </transition> -->

            <!-- appear表示初始化时执行动画 -->
            <!-- <transition name="kerwinbounce" appear>
                <div class="div3" v-show="isShowAppear">33333333333</div>
            </transition> -->

            <!--  
                1、transition只能放一个元素，所以多元素时要使用if-else进行区分；
                2、若元素标签相同要使用key进行区分，参见vue对dom的操作机制；
                3、mode表示动画效果设定。
            -->
            <!-- <transition name="kerwinbounce" mode="out-in">
                <p v-if="isShow" key="1">11111111111</p>
                <p v-else key="2">22222222222</p>
            </transition> -->

            <input type="text" v-model="mytext" />
            {{mytext}}
            <button @click="handleAddClick">add</button>

            <!-- 1、transition-group可以放入多个元素，但每个元素要用唯一key区分；
                 2、transition-group默认会用span进行替换，tag可以自定义替换的标签。
            -->
            <transition-group name="kerwinbounce" tag="ul">
                <li v-for="(data, index) in datalist" :key="data.id">
                    {{data.id}}---{{data.name}}
                    <button @click="handleDelClick(index)">del</button>
                </li>
            </transition-group>
        </div>

        <script>
            const vm = new Vue({
                el: '#box',
                data() {
                    return {
                        isShow: false,
                        isShowAppear: true,
                        datalist: [],
                        mytext: '111111'
                    };
                },
                methods: {
                    handleAddClick() {
                        this.datalist.push({
                            id: Math.floor(Math.random() * 100),
                            name: this.mytext
                        });
                    },
                    handleDelClick(index) {
                        this.datalist.splice(index, 1);
                    }
                }
            });
        </script>
    </body>
</html>
